<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layuiAdmin</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<form class="layui-form">
    <label>服务器出租</label>
    <div class="layui-input-inline">
        <select name="city">
            <option value=""></option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
            <option value="4">杭州</option>
        </select>
    </div>
    <div class="layui-input-inline">
        <button class="layui-btn layui-btn-sm" lay-submit lay-filter="formSearch">搜索</button>
    </div>
</form>
<table id="demo" lay-filter="test"></table>
</body>
</html>
<!--顶部操作栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    </div>
</script>
<!--每条数据的操作栏-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } }}
</script>
<script type="text/html" id="editDialog">
    <form class="layui-form" action="" style="padding: 20px;" lay-filter="editDialogForm">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择城市</label>
            <div class="layui-input-inline">
                <select name="city">
                    <option value="城市-0">城市-0</option>
                    <option value="城市-1">城市-1</option>
                    <option value="城市-2">城市-2</option>
                    <option value="城市-3">城市-3</option>
                    <option value="城市-4">城市-4</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">请填写签名</label>
            <div class="layui-input-block">
                <textarea name="sign" placeholder="请填写签名" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">积分</label>
            <div class="layui-input-inline">
                <input type="number" name="experience" placeholder="请输入积分" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">评分</label>
            <div class="layui-input-inline">
                <input type="number" name="score" placeholder="请输入评分" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选择职业</label>
            <div class="layui-input-inline">
                <select name="classify">
                    <option value="作家">作家</option>
                    <option value="词人">词人</option>
                    <option value="酱油">酱油</option>
                    <option value="诗人">诗人</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">财富</label>
            <div class="layui-input-inline">
                <input type="number" name="wealth" placeholder="请输入财富" autocomplete="off" class="layui-input">
            </div>
        </div>

    </form>
</script>
<script src="../js/jquery.min.js"></script>
<script src="../layui/layui.all.js"></script>
<script src="../js/common.js"></script>
<script>
    layuiModules=['table', 'layer','form'];

    function mounted() {
        //第一个实例
        table.render({
            elem: '#demo'
            , toolbar: '#toolbarDemo'
            , height: 550
            , method: 'POST'
            , contentType: "application/json;charset=UTF-8"
            , defaultToolbar: []
            , url: 'serverchuzu.json' //数据接口
            , page: false //开启分页
            , cols: [[ //表头
                {checkbox: true, LAY_CHECKED: false}
                , {field: 'user', title: '出租人', width: 80, sort: true}
                , {field: 'daik', title: '带宽', width: 80, sort: true}
                , {field: 'disk', title: '磁盘', width: 80}
                , {field: 'mery', title: '内存', width: 80, sort: true}
                , {field: 'money', title: '金额', width: 80}
                , {field: 'startTime', title: '开始时间', width: 177}
                , {field: 'endTime', title: '结束时间', width: 177}
                , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
        });
        //监听事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    layer.msg('添加');
                    layer.open({
                        type: 1,
                        title: '添加',
                        area:['50%','70%'],
                        content: $('#editDialog').html(), //这里content是一个普通的String
                        btn: ['确定', '取消'],
                        success: function (index, layero) {
                            form.render();
                        },
                        yes: function (index, layero) {

                        },
                        btn2: function (index, layero) {
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    });
                    break;
                case 'delete':
                    console.log(checkStatus);
                    layer.confirm('真的删除选中行么', function (index) {
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                    break;
            }
        });

        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') { //编辑
                //do something
                layer.open({
                    type: 1,
                    title: '编辑',
                    area:['50%','70%'],
                    content: $('#editDialog').html(), //这里content是一个普通的String
                    btn: ['确定', '取消'],
                    success: function (index, layero) {
                        form.render();
                        form.val("editDialogForm",data);
                    },
                    yes: function (index, layero) {

                    },
                    btn2: function (index, layero) {
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    , title: 'xxx'
                });
            }
        });

    }

</script>